<template>
  <div class="base-container">
    <!--    <t-row>-->
    <div style="position: fixed;width: 25%;height: 100%;overflow: scroll;padding-bottom: 100px">
      <t-loading size="small" :loading="dataLoading" showOverlay>
        <div>
          <!--          {{TreeReviewTeamData}}-->
          <t-tree line ref="tree" :keys="{value: 'id',label:'name'}" :actived="actived" expand-all
                  :data="TreeReviewTeamData" @active="onTreeActive" activable hover
                  transition>
            <template #label="{ node }">
              {{ node.data.label }}
              <!--              {{node.data.name}}({{node.data.projectCount}})-->
            </template>
            <template #operations="{ node }">
              <t-button size="small" variant="text" @click="dialog.header = '添加组';
              dialog.objId = 0;
              dialog.parentId = node.data.id;
              dialog.open_add_edit = true;">
                <t-icon name="add" slot="icon"/>
              </t-button>
              <t-button v-if="node.data.name!=='评审分组体系'" size="small" variant="text" @click="dialog.header = '编辑组';
              dialog.objId = node.data.id;
              dialog.parentId = 0;
              dialog.open_add_edit = true;">
                <t-icon name="edit-1" slot="icon"/>
              </t-button>
              <t-popconfirm v-if="node.data.name!=='评审分组体系'" @confirm="removeNode(node)" theme="warning"
                            content="确认删除分组吗">
                <t-button size="small" variant="text">
                  <t-icon name="delete" slot="icon"/>
                </t-button>
              </t-popconfirm>
            </template>
          </t-tree>
        </div>
      </t-loading>
    </div>
    <!-- 右侧内容 -->
    <div style="margin-left: 29%;height: 100%;">
      <t-loading size="small" :loading="baseLoading" showOverlay>
        <t-card>
          <t-table style="height: 100vh" rowKey="index" size="small" :data="data" :columns="columns" hover
                   :pagination="pagination"
                   :loading="dataLoading" :sort="sort" :hideSortTips="true" @sort-change="sortChange" multipleSort>
            <template #projectName="{ row }">
              <t-link @click="nameClick(row)" hover="color" theme="primary">{{ row.projectName }}</t-link>
            </template>
            <template #standardProperty="{ row }">
              {{ row.standardProperty | filterByDict(dict.type.standard_property) }}
            </template>
            <template #formulateType="{ row }">
              {{ row.formulateType | filterByDict(dict.type.formulate_type) }}
            </template>
            <template #standardCategory="{ row }">
              {{ row.standardCategory | filterByDict(dict.type.standard_category) }}
            </template>
            <template #reviseNum="{ row }">
              {{ row.reviseNum || "-" }}
            </template>
            <template #draftUnitNames="{ row }">
             <t-tooltip :content="row.draftUnitNames">
               <p style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden;">
                 {{row.draftUnitNames || "-"}}
               </p>
              </t-tooltip>
            </template>
            <template #consistencyDegree="{ row }">
              {{ row.consistencyDegree || "-" }}
            </template>
            <template #internationalStandardNum="{ row }">
              {{ row.internationalStandardNum || "-" }}
            </template>
            <template #manageDeptId="{ row }">
              {{ row.manageDeptId | filterByTree(deptMenuOptions) }}
            </template>
            <template #completeDate="{ row }">
              {{ row.completeDate || "-" }}
            </template>
            <template #publishDate="{ row }">
              {{ row.publishDate || "-" }}
            </template>
            <template #implDate="{ row }">
              {{ row.implDate || "-" }}
            </template>
            <template #localStandardStatus="{ row }">
              <t-tag @click="dialog.header=row.projectName;dialog.objId=row.id;dialog.open_approve_list=true"
                     class="cursor-pointer" :theme="handleTheme(row.localStandardStatus, dict.type.local_standard_status)"
                     variant="light">
                {{ row.localStandardStatus | filterByDict(dict.type.local_standard_status) }}
              </t-tag>
            </template>
            <template #op="{ row }">
              <t-button size="small" @click="nameClick(row)" variant="text" class="t-button-link">
                <t-icon name="info-circle" slot="icon"/>
                详情
              </t-button>
              <!-- <t-button @click="" size="small"
                        variant="text" class="t-button-link">
                <t-icon name="file-pdf" slot="icon"/>
                导出PDF
              </t-button> -->
              <!--        <t-button-->
              <!--          theme="danger"-->
              <!--          @click=""-->
              <!--          size="small"-->
              <!--          variant="text" class="t-button-link">-->
              <!--          <t-icon name="delete" slot="icon"/>-->
              <!--          删除-->
              <!--        </t-button>-->
            </template>
          </t-table>
        </t-card>
      </t-loading>
    </div>
    <standardDetailDialog :objId="dialog.objId" :header="dialog.header"  :visible.sync="dialog.open_detail" v-if="dialog.open_detail">
    </standardDetailDialog>
    <!--    </t-row>-->
    <!-- 添加分组  编辑分组 -->
    <add-edit-group @reload="getListReviewTeam()" @changeActived="changeActived" :header="dialog.header"
                    :parentId="dialog.parentId"
                    :objId="dialog.objId" :visible.sync="dialog.open_add_edit" v-if="dialog.open_add_edit">
    </add-edit-group>
  </div>
</template>

<script>
import addEditGroup from "./components/add-edit-group.vue";
import standardDetailDialog from "@/pages/bzh/standard/components/standard-detail-dialog.vue";

export default {
  name: "system-index",
  components: {
    addEditGroup,
    standardDetailDialog,
  },
  dicts: ["project_type", "prof_tit", "duty", "subject_classification", "bzh_review_type", "education", "degree", "formulate_type", "standard_property", "standard_category", "local_standard_status"],
  data() {
    return {
      sort: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showPageSize: true,
        pageSizeOptions: [10, 20, 30, 50],
        showFirstAndLastPageBtn: false,
        onChange: (pageInfo) => {
          Object.assign(this.pagination,pageInfo)
          this.queryParams.pageNum = pageInfo.current || 1;
          this.queryParams.pageSize = pageInfo.pageSize;
          this.getList()
        },
      },
      data: [],
      columns: [
        {
          colKey: "projectName",
          title: "标准名称",
          align: "center",
          width: 220
        },
        {
          colKey: "projectNum",
          title: "标准编号",
          align: "center",
          width: 160,
        },
        {
          colKey: "standardProperty",
          title: "标准性质",
          align: "center",
          width: 160,
        },
        {
          colKey: "standardCategory",
          title: "标准类别",
          align: "center",
          width: 160,
        },
        {
          colKey: "formulateType",
          title: "制定或修订",
          align: "center",
          width: 160,
        },
        {
          colKey: "draftUnitNames",
          title: "主要起草单位",
          align: "center",
          width: 160,
          ellipsis: true,
        },
        {
          colKey: "completeDate",
          title: "完成时间",
          align: "center",
          width: 160,
          sorter: true,
        },
        {
          colKey: "publishDate",
          title: "发布时间",
          align: "center",
          width: 160,
          sorter: true,
        },
        {
          colKey: "implDate",
          title: "实施时间",
          align: "center",
          width: 160,
          sorter: true,
        },
        {
          colKey: "localStandardStatus",
          title: "标准状态",
          align: "center",
          width: 160,
          fixed: 'right'
        },
        // {
        //   colKey: "approveStatus",
        //   title: "审批状态",
        //   align: "center",
        //   width: 160,
        // },
        {
          colKey: "op",
          title: "操作",
          align: "center",
          width: 240,
          fixed: 'right'
        },
      ],
      actived: [],
      visible: false,
      activeId: '',
      activeIds: [],
      TreeReviewTeamData: [],
      dialog: {
        parentId: 0,
        objId: 0,
        teamId: 0,
        projectId: 0,
        editOpen: false,
        open_add_edit: false,
        header: "",
        open_detail: false,
        open_review_list: false,
        open_select_project: false,
        open_select_expert: false,
        open_project_approval: false,
        projectName: '',
        open_project_detail: false,
        open_review_standard: false,
        open_outline_detail: false,
      },
      formData: {
        id: '',
        reviewType: '',
        name: '',// 分组名
        note: '',
        subjectClassification: [],
        planName: ""
      },
      baseLoading: false,
      dataLoading: false,
    }
  },
  watch: {
    'formData.id': {
      immediate: true,
      handler(val) {
        if (this.formData.id) {
          this.teamProjectGet();
          this.teamExpertGet();
        }
      }
    },
  },
  created() {
    this.dataLoading = true
    this.getListReviewTeam()
    // this.getIndexList();
  },
  methods: {
    nameClick(row) {
      this.dialog.objId = row.id
      this.dialog.reportTrialId = row.reportTrialId
      this.dialog.header = row.projectName
      this.dialog.open_detail = true
    },
    sortChange(sort) {
      this.sort = sort
      const orderByColumn = sort.map(val => val.sortBy)
      const isAsc = sort.map(val => val.descending ? `desc` : `asc`)
      this.queryParams.orderByColumn = orderByColumn.join(",")
      this.queryParams.isAsc = isAsc.join(",")
    },
    handleExport(url, title) {
      this.$download(url, this.queryParams, `${title}_${new Date().getTime()}.xls`)
    },
    removeNode(node) {
      this.$api.bzh.standard.deleteStandardTree(node.data.id).then(
        (res) => {
          this.getListReviewTeam();
          this.$message.success("删除成功");
        }
      ).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    getListReviewTeam() {
      this.$api.bzh.standard.standardSystemTree().then((res) => {
        this.dataLoading = false
        this.TreeReviewTeamData = res.data;
      }).catch((e) => {
        this.dataLoading = false
        this.$message.error(e.toString());
      });
    },
    onTreeActive(value, context) {
      this.actived = [context.node.data.id]
      const queryParams = {
        "systemId": context.node.data.id
      }
      this.$api.bzh.standard.list(queryParams).then((response) => {
        this.data = response.rows
        this.pagination.total = response.total
        // response.data.subjectClassification = response.data.subjectClassification?response.data.subjectClassification.split(",").filter(item=> item !== ''):[]
        Object.assign(this.formData, response.data);
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    selectProject() {
      if (!this.formData.id) {
        return this.$message.error('请选择分组')
      }
      this.dialog.open_select_project = true
    },
    selectExpert() {
      if (!this.formData.id) {
        return this.$message.error('请选择分组')
      }
      this.dialog.open_select_expert = true
    },
  }
}
</script>

<style scoped lang="less">
</style>
